<template>
	<view class="chooistime">
		<view class="time">
			<view class="time_title font13 font-989898">已选日期 :<text class="font-323232 font-b">{{day}} {{week}}</text></view>
			<view class="mzyy_title">
				<view class="time_list">
					<view v-for="(item,index) in timeList" :key="index" class="time_listbos" v-show="item.weekname" @click="Ontime(item)">
						<view :class="item.day == day?'background_6bcbb6':'background_ffffff'" class="time_listbox">
							<view :class="item.day == day?'font-ffffff':'font-989898'" class="font11">{{item.weekname}}</view>
							<view :class="item.day == day?'font-ffffff':'font-6bcbb6'" class="font13">{{item.getDate}}号</view>
							<view :class="item.day == day?'font-ffffff':'font-c8c8c8'" class="font10">{{item.type}}</view>
						</view>
					</view>
				</view>
				<view class="title_choice" @click="Onchoice">
					<image src="../../static/arrow-circle-down.png"></image>
				</view>
			</view>
		</view>
		<view class="com_border"></view>
		<!-- 数据 -->
		<view class="docyy_data">
			<view class="docyy_list" v-for="(item,index) in doctime" :key="index" @click="OnPopupshow(item)">
				<view class="font-323232 font-b">{{item.begin}}~{{item.end}}</view>
				<view class="docyy_bos">
					<view>￥{{item.video_money.hang_moeny}}</view>
					<image src="/static/my/morea.png"></image>
				</view>
			</view>
		</view>
		<Com-popuptime ref="compopuptime" @OnComconfirm="OnComconfirm"></Com-popuptime>
	</view>
</template>

<script>
	import ComPopuptime from '@/components/ComPopuptime.vue';
	export default {
		components: {
			ComPopuptime
		},
		data() {
			return {
				id: null,
				timeList: [], //时间列表
				week: '', //周几
				day: '', //日期
				doctime: [], //医生排版时间
			}
		},
		onLoad: function(options) {
			this.id = options.id
			//获取时间
			this.Onvideoday()
		},
		methods: {
			//获取时间
			Onvideoday() {
				this.$Http({
					url: 'video_time_list',
					data: {
						doctor_id: this.id,
					}
				}).then(res => {
					this.timeList = res.data
					//修改时间结构
					this.Ondata()
				})
			},
			//修改结构
			Ondata() {
				let list = this.timeList
				list.forEach(item => {
					item.getDate = new Date(item.day).getDate()
					item.show = false
					if (item.week == 1) {
						item.weekname = '周一'
					}
					if (item.week == 2) {
						item.weekname = '周二'
					}
					if (item.week == 3) {
						item.weekname = '周三'
					}
					if (item.week == 4) {
						item.weekname = '周四'
					}
					if (item.week == 5) {
						item.weekname = '周五'
					}
					if (item.week == 6) {
						item.weekname = '周六'
					}
					if (item.week == 7) {
						item.weekname = '周日'
					}
				})
				list[0].show = true
				this.week = list[0].weekname
				this.day = list[0].day
				let num = 9 - (10 - list[0].week)
				for (let i = 0; i < num; i++) {
					list.unshift({})
				}
				this.timeList = list
				//获取医生列表时间
				this.Ondoctortimelist()
			},
			//医生详情时间列表挂号周期
			Ondoctortimelist() {
				this.$Http({
					url: 'video_day_scheduling_list',
					token: false,
					data: {
						doctor_id: this.id,
						day: this.day
					}
				}).then(res => {
					this.doctime = res.data
				})
			},
			//选择时间
			Ontime(e) {
				this.day = e.day
				this.week = e.weekname
				this.Ondoctortimelist()
			},
			//查看时间
			Onchoice() {
				this.$refs.compopuptime.Onshow(this.timeList, this.day);
			},
			//组件确认
			OnComconfirm(e) {
				this.timeList.forEach(item => {
					if (item.day == e) {
						this.week = item.weekname
					}
				})
				this.day = e
				this.Ondoctortimelist()
			},
			//确认时间
			OnPopupshow(e) {
				uni.redirectTo({
					url: '/pagesA/ask/diag?type=sp' + '&id=' + this.id + '&day=' + this.day + '&week=' + this.week +
					'&begin=' + e.begin + '&end=' + e.end,
				})
				console.log(e, '????')
			}
		}
	}
</script>

<style>
	/* 挂号 */
	/* 日期 */
	.time_title {
		padding: 26rpx 0 26rpx 25rpx;
	}

	.time_title text {
		margin-left: 20rpx;
	}

	.mzyy_title {
		width: 750rpx;
		height: 126rpx;
		position: relative;
	}


	.mzyy_yuyue {
		width: 124rpx;
		height: 126rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.time_list {
		width: 750rpx;
		height: 126rpx;
		overflow: hidden;
		overflow-x: scroll;
		white-space: nowrap;
		padding-right: 86rpx;
	}

	.time_listbos {
		width: 124rpx;
		height: 126rpx;
		display: inline-block;
	}

	.time_listbox {
		width: 124rpx;
		height: 126rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.background_ffffff {
		background-color: #ffffff;
	}

	.background_6bcbb6 {
		background-color: #6bcbb6;
	}

	.title_choice {
		height: 126rpx;
		width: 86rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title_choice image {
		width: 36rpx;
		height: 36rpx;
	}

	/* 数据 */
	.docyy_data {
		background-color: #ffffff;
	}

	.docyy_list {
		width: 690rpx;
		margin-left: 30rpx;
		padding: 32rpx 0;
		background-color: #ffffff;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f2f2f2;
	}

	.docyy_bos {
		display: flex;
		color: #f1a55e;
	}

	.docyy_bos image {
		height: 26rpx;
		width: 14rpx;
		margin-left: 30rpx;
	}
</style>
